<template>
	<PageWrapper>
		<view style="height: 100vh; background-color: #f5f5f5">
			<topLogo></topLogo>
			<view style="padding: 20px 20px 0; box-sizing: border-box">
				<view
					style="
						display: flex;
						background-color: #fff;
						align-items: center;
						justify-content: space-between;
						padding: 20px;
						border-radius: 8px 8px 0 0;
						border-bottom: 1px solid #f5f5f5;
					"
				>
					<text style="font-weight: 600; font-size: 20px; color: #333">已上课未消课清单</text>
					<view @click="back" style="display: flex; align-items: center; border-radius: 3px; box-sizing: border-box; padding: 8px 20px; background-color: #0052d9">
						<text style="font-size: 18px; padding-top: 3px; box-sizing: border-box; color: #fff; margin-right: 9px">返回</text>
						<image src="/static/back.png" style="width: 18px; height: 18px" mode=""></image>
					</view>
					<!-- <view style="border-bottom: 1px solid #090"> </view> -->
				</view>
			</view>
			<view style="padding: 0 20px 20px; box-sizing: border-box">
				<view style="background-color: #fff; padding: 20px 20px 10px">
					<view style="padding: 20px 30px; box-sizing: border-box; border-radius: 8px; border: 1px solid #dbdbdb">
						<view style="padding-bottom: 20px; border-bottom: 1px solid #dbdbdb">
							<text style="font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 20px; color: #333333; line-height: 22px">{{ '啊啊的' }} 学管</text>
						</view>
						<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center">
							<view style="">
								<text style="font-weight: 600; font-size: 20px; color: #333333; line-height: 22px">ID：23212 阿雅（2节课）</text>
							</view>
							<view style="width: 112px; height: 38px; display: flex; justify-content: center; align-items: center; background-color: #0052d9; border-radius: 3px">
								<text style="font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px; color: #ffffff">点击消课</text>
							</view>
						</view>
						<view class="">
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
						</view>
					</view>
				</view>
				<view style="background-color: #fff; padding: 20px 20px 10px">
					<view style="padding: 20px 30px; box-sizing: border-box; border-radius: 8px; border: 1px solid #dbdbdb">
						<view style="padding-bottom: 20px; border-bottom: 1px solid #dbdbdb">
							<text style="font-family: PingFang SC, PingFang SC; font-weight: 600; font-size: 20px; color: #333333; line-height: 22px">{{ '啊啊的' }} 学管</text>
						</view>
						<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center">
							<view style="">
								<text style="font-weight: 600; font-size: 20px; color: #333333; line-height: 22px">ID：23212 阿雅（2节课）</text>
							</view>
							<view style="width: 112px; height: 38px; display: flex; justify-content: center; align-items: center; background-color: #0052d9; border-radius: 3px">
								<text style="font-family: PingFang SC, PingFang SC; font-weight: 400; font-size: 18px; color: #ffffff">点击消课</text>
							</view>
						</view>
						<view class="">
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
							<view style="padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 20px; color: #333333">
								<text>数学 9:00-10:30 王辉老师</text>
								<text>未消课</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<up-modal v-model:show="showEnterNum" :show-confirm-button="false" title="输入学管工号" @cancel="cancel" width="660px">
				<view style="width: 100%; box-sizing: border-box; padding: 30px 0px 0; border-top: 1px solid #e8e8e8">
					<view style="margin-bottom: 30px">
						<text style="font-size: 20px; color: #333333">学管姓名：{{ jiaoWu }}</text>
					</view>
					<view style="margin-bottom: 50px; display: flex; align-items: center">
						<text style="font-size: 20px; color: #333333">学管工号：</text>
						<up-input :customStyle="{ height: '40px' }" fontSize="20px" placeholder="请输入学管工号" border="surround" type="number" v-model="managerCode"></up-input>
					</view>
					<view style="padding-bottom: 30px; box-sizing: border-box; display: flex; width: 100%; justify-content: center">
						<view
							@click="cancel"
							style="
								margin-right: 15px;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 132px;
								height: 48px;
								background: #e1e1e1;
								border-radius: 8px 8px 8px 8px;
							"
						>
							<text style="font-weight: 600; font-size: 20px; color: #6b6b6b">返回</text>
						</view>
						<view
							@click="callBackModal"
							style="display: flex; justify-content: center; align-items: center; width: 132px; height: 48px; background: #0052d9; border-radius: 8px 8px 8px 8px"
						>
							<text style="font-weight: 600; font-size: 20px; color: #fff">确定</text>
						</view>
					</view>
				</view>
			</up-modal>
			<up-modal v-model:show="takePhoto" :showConfirmButton="false" title="提示" width="660px">
				<view style="width: 100%; padding: 20px 0 0; border-top: 1px solid #e8e8e8; display: flex; flex-direction: column">
					<view style="margin-bottom: 20px; text-align: center">
						<text style="font-size: 20px; color: #333333">录入头像注意事项！</text>
					</view>
					<view style="margin-bottom: 30px; display: flex; flex-direction: column; font-size: 20px; color: #333333">
						<text style="margin-bottom: 20px">人脸识别规则：</text>
						<text style="margin-bottom: 20px">1.正面免冠​：学生正对镜头，双眼平视，露出完整面部（额头、眉毛、耳朵清晰可见）。</text>
						<text style="margin-bottom: 20px">2.自然状态​：不化浓妆，不戴饰品/眼镜，头发不遮眉，避免美颜滤镜。</text>
						<text style="margin-bottom: 20px">3.光线背景​：光线均匀（避免强光或昏暗），纯色简洁背景（如白墙）。</text>
						<text style="margin-bottom: 20px">4.照片通途：学生到校签到核销课程。</text>
					</view>
					<view style="padding-bottom: 30px; display: flex; width: 100%; justify-content: center">
						<view
							@click="Tipcancel"
							style="
								margin-right: 15px;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 132px;
								height: 48px;
								background: #e1e1e1;
								border-radius: 8px 8px 8px 8px;
							"
						>
							<text style="font-weight: 600; font-size: 20px; color: #6b6b6b">返回</text>
						</view>
						<view
							@click="toTakePhoto"
							style="display: flex; justify-content: center; align-items: center; width: 132px; height: 48px; background: #0052d9; border-radius: 8px 8px 8px 8px"
						>
							<text style="font-weight: 600; font-size: 20px; color: #fff">拍照录入</text>
						</view>
					</view>
				</view>
			</up-modal>
			<FullscreenSwiper />
		</view>
	</PageWrapper>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import PageWrapper from '@/components/PageWrapper.vue';
import FullscreenSwiper from '@/components/FullscreenSwiper.vue';
import topLogo from '@/components/topLogo.vue';
import { getStudentFaceList, checkManager } from '@/api/getData.js';

const studentList = ref([]);
const getStudentNoFaceList = async () => {
	try {
		uni.showLoading({
			title: '请稍候...'
		});
		console.log('未录入头像列表', campusId.value);
		const res = await getStudentFaceList({
			campusId: campusId.value,
			isHas: 0
		});
		console.log(res);
		if (res.code == 200 && res.data !== null) {
			studentList.value = res.data.map((item) => ({
				letter: item.firstLetter,
				data: item.studentList.map((student) => ({
					name: student.studentName,
					id: student.studentId,
					count: student.zongHour,
					jiaoWu: student.jiaoWu
				}))
			}));
		}
	} catch (error) {
		console.log('消课学生列表请求失败', error);
	} finally {
		setTimeout(() => uni.hideLoading(), 500);
	}
};

const managerCode = ref(null);
const callBackModal = async () => {
	if (managerCode.value) {
		uni.showLoading({
			title: '正在校验学管'
		});
		try {
			// console.log('请求参数', studentId.value, campusId.value);
			const res = await checkManager({
				studentId: studentId.value,
				campusId: campusId.value,
				managerCode: managerCode.value
			});
			if (res.code == 200) {
				console.log(111, res.data);
				uni.hideLoading();
				managerCode.value = null;
				showEnterNum.value = false;
				takePhoto.value = true;
			}
		} catch (error) {
			console.log('校验学管请求失败', error);
			uni.showToast({
				title: error.message,
				icon: 'none'
			});
			uni.hideLoading();
		}
	} else {
		uni.showToast({
			title: '工号不能为空',
			icon: 'error'
		});
	}
};
const takePhoto = ref(false);
const toTakePhoto = () => {
	// showRes.value = true;
	takePhoto.value = false;
	console.log('去拍照页面');
	uni.navigateTo({
		url: '/pages/takePhoto/takePhoto?campusId=' + campusId.value + '&studentId=' + studentId.value
	});
};
const showEnterNum = ref(false);
const jiaoWu = ref(null);
const studentId = ref(null);
let timer = null;
const bindClick = (e) => {
	// if (e.item.count == 0) {
	// 	return
	// }
	console.log(e);
	jiaoWu.value = e.item.jiaoWu;
	studentId.value = e.item.id;
	showEnterNum.value = true;
	timer = setTimeout(() => {
		hide();
	}, 60000);
	// uni.navigateTo({
	// 	url: `/pages/studentSubClass/studentSubClass?id=${e.item.id}&name=${e.item.name}&campusId=${campusId.value}`
	// });
};
const back = () => {
	uni.navigateBack();
};
const hide = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	showEnterNum.value = false;
	if (timer) clearTimeout(timer);
};
const cancel = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	showEnterNum.value = false;
};
const Tipcancel = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	takePhoto.value = false;
};

const campusId = ref(null);
onMounted(() => {});
onUnmounted(() => {
	if (timer) clearTimeout(timer);
});
onLoad((options) => {
	campusId.value = options.campusId;
	console.log(options.campusId);
});
onShow(() => {
	console.log('校区ID', campusId.value);
	getStudentNoFaceList();
});
</script>

<style></style>
